import React, { Component } from 'react'
import moment from 'moment'
import { Breadcrumb, Select, Input, Table, Modal, message } from 'antd'
import API from 'UTIL/libs/api'
import './index.less'

const Option = Select.Option
const Search = Input.Search
const confirm = Modal.confirm

function ObjToUrlStr(obj) {
  var str = ''
  if (obj != {}) {
    var i = 0
    for (var key in obj) {
      if (i == 0) {
        str = str + '?' + key + '=' + obj[key]
      } else {
        str = str + '&' + key + '=' + obj[key]
      }
      i++
    }
  }
  return str
}

// 注册时间, 客户id, 注册手机号, 客户昵称, 客户类型, 最近一次登录ip地址, 状态, 操作
export default class Customer extends Component {
  constructor(props) {
    super(props)
    this.displayName = 'Customer'
    this.state = {
      columns: [{
        title: '注册时间',
        dataIndex: 'createTime',
        key: 'createTime',
        render: text => moment(text).format('L')
      }, {
        title: '客户id',
        dataIndex: 'id',
        key: 'id'
      }, {
        title: '注册手机号',
        dataIndex: 'phone',
        key: 'phone'
      }, {
        title: '客户昵称',
        dataIndex: 'alias',
        key: 'alias',
        render: (text, item) => <a href={'#/customer/' + item.id}>{text}</a>
      }, {
        title: '客户类型',
        dataIndex: 'vipId',
        key: 'vipId',
        render: text => text == 1 ? '月vip' : text == 12 ? '年vip' : text == 3 ? '季vip' : '非vip'
      }, {
        title: '最近一次登录ip地址',
        dataIndex: 'ip',
        key: 'ip'
      }, {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: text => text == 1 ? '正常' : text == 2 ? '封号中' : '-'
      }, {
        title: '操作',
        key: 'action',
        render: (text, item) => (
          <span>
          {
            item.status == 1 ? <a href="javascript:;" onClick={this.setStatus.bind(this, item)}>封号</a> :
            item.status == 2 ? <a href="javascript:;" onClick={this.setStatus.bind(this, item)}>恢复</a> :
            null
          }
          </span>
        )
      }],
      phone: '',
      vipType: 'all',
      pageIndex: 0, // 从第几个开始
      pageSize: 10
    }
  }
  // 获取数据 参数：phone vipType pageIndex pageSize
  fetchData = (params = {}) => {
    var { phone, vipType, pageIndex, pageSize } = this.state
    this.setState({
      loading: true
    })
    API.callJson('/userbasic/map')({
      phone: phone,
      vipType: vipType,
      pageIndex: pageIndex,
      pageSize: pageSize,
      ...params
    }).then((data)=>{
      console.log(data)
      this.setState({
        list: data.list,
        total: data.count,
        loading: false
      })
    }).catch((msg)=>{
      console.log(msg)
      this.setState({
        loading: false
      })
      message.error(msg)
    })
  }
  // 更改状态
  setStatus(item) {
    var { status, id, alias } = item
    var _this = this
    confirm({
      title: '你确认要将该账户' + (status == 1 ? '封号' : status == 2 ? '恢复' : '') + '吗?',
      content: '账户名：' + alias,
      onOk() {
        API.callJson('/userbasic/put-stu' + ObjToUrlStr({
          status: status == 1 ? 2 : status == 2 ? 1 : null,
          id: id
        }))().then((data)=>{
          message.success('操作成功')
          _this.fetchData()
        }).catch((msg)=>{
          message.error('操作失败')
          console.log(msg)
        })
      },
      onCancel() {
        console.log('Cancel')
      }
    })
  }
  // search
  handleSearch(val) {
    this.setState({
      phone: val
    })
    this.fetchData({
      phone: val
    })
  }
  // select
  handleSelect(val) {
    this.setState({
      vipType: val
    })
    this.fetchData({
      vipType: val
    })
  }
  // table内变换：分页...
  handleTableChange = (pagination, filters, sorter) => {
    this.setState({
      pageIndex: (pagination.current - 1) * pagination.pageSize
    })
    this.fetchData({
      pageIndex: (pagination.current - 1) * pagination.pageSize
    })
  }
  // 首次渲染结束后
  componentDidMount() {
    this.fetchData()
  }
  render() {
    var { columns, list, loading, pageIndex, pageSize, total } = this.state
    var pagination = {
      current: pageIndex / pageSize + 1,
      pageSize: pageSize,
      total: total
    }
    return <div className="tederen-customer">
      <div className="tederen-breadcrumb-container">
        <Breadcrumb separator=">">
          <Breadcrumb.Item><a className="tederen-breadcrumb-title">第三方组件</a></Breadcrumb.Item>
          <Breadcrumb.Item><a >AntDesign</a></Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <div className="tederen-input-group">
        <span className="tederen-input-container">
          <Search
            placeholder="输入客户注册手机号搜索"
            style={{ width: 200 }}
            onSearch={this.handleSearch.bind(this)}
          />
        </span>
        <Select defaultValue="全部" style={{ width: 120 }} onChange={this.handleSelect.bind(this)}>
          <Option value="all">全部</Option>
          <Option value="1">月vip</Option>
          <Option value="3">季vip</Option>
          <Option value="12">年vip</Option>
          <Option value="0">非vip</Option>
        </Select>
      </div>
      <Table pagination={pagination} columns={columns} dataSource={list} loading={loading} onChange={this.handleTableChange}/>
    </div>
  }
}
